import React from 'react'
import {StyleSheet, View, Text, SafeAreaView, Image, FlatList, TouchableWithoutFeedback, StatusBar } from 'react-native'
import {Header, SearchBar} from '../../components'
import { GET, POST, PUT, pxToPt,DELETE } from '../../utils'
import {Card, WingBlank, WhiteSpace, Button, SwipeAction} from '@ant-design/react-native'
import { useNavigation } from '@react-navigation/native'
import {useSelector, useDispatch} from 'react-redux'
import { FRIENDREQUEST } from '../../service'
import {InitUserFriendRequest} from '../../store/reducer/user'

export default function index() {
  const theme = 'rgb(21,22,30)'
  const navigation = useNavigation()
  const dispatch = useDispatch()
  const userFriendRequest = useSelector(state=>state.user.userFriendRequest)
  const user = useSelector(state=>state.user)
  const Item = ({ agree, id, requester, requesterRemark='' }) =>  (
      <SwipeAction
        autoClose
        style={{ backgroundColor: 'transparent' }}
        right={[{
          text: 'Delete',
          onPress: async () => {
            await DELETE(FRIENDREQUEST + `${id}/` ,{token: user.currentUser.token})
            dispatch(InitUserFriendRequest())
          } ,
          style: { backgroundColor: 'red', color: 'white' },
        }]}
          >
          <TouchableWithoutFeedback onPress={()=> {navigation.navigate('PersonalHomePage', {fid: requester.id})}}>
            <View style={styles.item}>
              <Image style={styles.avatar} source={require('../../../assets/bg/woman.jpeg')} />
              <View style={styles.friendInfo}>
                <View style={styles.desc}>
                <Text style={styles.name} >{requester.username}</Text>
                <Text style={styles.remarks}>{requesterRemark? requesterRemark: `我是${requester.username}`}</Text>
                </View>
              {
                agree?(<Button size="small" disabled style={styles.button}>已添加</Button>):
                (<Button size="small" type="primary" onPress={async  _=>{
                  await PUT(FRIENDREQUEST + `${id}/` ,{data:{requesterId :requester.id}, token: user.currentUser.token})
                  dispatch(InitUserFriendRequest()) 
                } } activeStyle={{ backgroundColor: 'rgb(0,22,30)'}} style={styles.button}>添加</Button>)
              }
              </View>
            </View>
          </TouchableWithoutFeedback>
        </SwipeAction>
      
  )
  return (
    <SafeAreaView style={{...styles.container, backgroundColor: theme}}>
      <StatusBar translucent={true} backgroundColor="transparent" />
      <Header leftPress={navigation.goBack} LeftIcon='back' title='新的朋友' RightIcon=" "  />
      <WhiteSpace size="lg" />
        {
          true&& (
            <View style={styles.list}>
              <FlatList
              data={userFriendRequest}
              renderItem={({item})=><Item {...item} />}
              keyExtractor={item => item.id}
            />
            </View>
          )
        }
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  list: {
    flex: 1,
    marginLeft: pxToPt(20),
    marginRight: pxToPt(20),
  },
  avatar: {
    height: pxToPt(40),
    width: pxToPt(40),
    borderRadius: pxToPt(10)
  },
  item:{
    flexDirection: 'row',
    borderBottomColor: 'gray',
    borderBottomWidth:pxToPt(0.2),
    padding: pxToPt(10),
  },
  friendInfo: {
    flex: 1, 
    flexDirection: 'row',
     justifyContent:'space-between'
  },
  button: {
    marginRight:pxToPt(10),
    alignSelf: 'center',
    borderWidth: 0
    
  },
  desc:{
    marginLeft: pxToPt(10),
    justifyContent: 'space-evenly'
  },
  name: {
    fontSize: pxToPt(15),
    color: 'white'
  },
  remarks:{
    color: 'gray'
  }
})
